<!--
用户详情
 -->
<template>
  <div class="app-container paddingT50">
    <div class="paddingLR20 clearfix">
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <div class="fl">
            <el-button type="default" size="medium" @click="btnCancle">关闭</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <el-card shadow="never" class="border-radius-none margin-t2">
      <!-- dataObj: {{ dataObj }} -->
      <div class="paddingTb20 ">
        <el-descriptions title="用户信息" direction="vertical" :column="4" border>
          <el-descriptions-item label="真实姓名"> {{ formData.realName }}</el-descriptions-item>
          <el-descriptions-item label="联系电话"> {{ formData.phone }}
          </el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ formData.idcard }}</el-descriptions-item>
          <el-descriptions-item label="职业">{{ formData.duty }}</el-descriptions-item>
          <el-descriptions-item label="民族"> {{ getNation(formData.nation) }}</el-descriptions-item>
          <el-descriptions-item label="住址"> {{ formData.address }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formData.createTime }}</el-descriptions-item>
          <el-descriptions-item label="修改时间"> {{ formData.updateTime }}</el-descriptions-item>
          <el-descriptions-item label="人脸">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="paddingTb20 ">
        <el-descriptions v-for="(account ) in accountDatas" title="账号信息" direction="vertical" :column="4" border>
          <el-descriptions-item label="账号昵称"> {{ account.name }}</el-descriptions-item>
          <el-descriptions-item label="账号号码"> {{ account.username }}</el-descriptions-item>
          <el-descriptions-item label="账号类型"> {{ getAccountType(account.type) }}</el-descriptions-item>
          <el-descriptions-item label="注册来源">{{ account.registerAppName }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ account.createTime }}</el-descriptions-item>
          <el-descriptions-item label="修改时间"> {{ account.updateTime }}</el-descriptions-item>
          <el-descriptions-item label="绑定应用">{{ getBindApp(account) }}
            <el-button type="success" size="medium" @click="openBindAppDialog(account)">更换绑定
            </el-button>
          </el-descriptions-item>
          <el-descriptions-item label="绑定角色">
            <el-button type="success" size="medium" @click="openBindRoleDialog(account)">更换绑定</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-dialog title="绑定应用" :visible.sync="dialogAppVisible" :close-on-click-modal="false">
      <el-form ref="appForm" :model="appForm" label-width="80px">
        <el-form-item label="应用">
          <el-checkbox-group v-model="appForm.bindApps">
            <el-checkbox
              v-for="data in appOptions"
              :label="data.value"
              :key="data.label"
            >
              {{ data.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="bindApp">绑定</el-button>
          <el-button @click="dialogAppVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="绑定角色" :visible.sync="dialogRoleVisible" :close-on-click-modal="false">
      <el-form ref="roleForm"  label-width="80px">
        <el-form-item label="">
          <el-card class="box-card" v-for="(accountBindRoleVo) in accountBindRoleVos">
            <div slot="header" class="clearfix">
              <span>{{ accountBindRoleVo.relAppName }}</span>
            </div>
            <div class="text item">
              <el-checkbox-group v-model="accountBindRoleVo.bindRoleIds">
                <el-checkbox
                  v-for="role in accountBindRoleVo.roleOptions"
                  :label="role.id"
                  :key="role.name"
                >
                  {{ role.name }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="bindRole">绑定</el-button>
          <el-button @click="dialogRoleVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import { oftenuse } from '@/libs/mixins'
import { findById } from '@/api/user/user.js'
import { bindApplication, findByUserId as findAccountByUserId, showBindRoleView } from '@/api/account/account.js'
import { getAccountType, getNation } from '@/api/enum/enum.js'
import { findAppByEnableStatus } from '@/api/application/application.js'
import { batchBindRole } from '../../../api/account/account'

export default {
  name: 'SysUserDetail',
  components: {},
  mixins: [oftenuse],
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      formLabelWidth: '60px',
      dialogAppVisible: false,
      dialogRoleVisible: false,
      accountBindRoleVos: [],
      currentAccount: null,
      appOptions: [],
      roleOptions: [],
      imageUrl: '',
      formData: {
        realName: null,
        phone: null,
        idcard: null,
        nation: null,
        address: null,
        face: null,
        createTime: null,
        updateTime: null
      },
      appForm: {
        bindApps: []
      },
      accountDatas: [],
      rules: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    // 页面初始化数据写在这里
    this.initData()
  },
  methods: {
    jump2list() {
      this.closeCurrentTag(this.$route)
      this.$router.push({
        name: 'sysUserList',
        params: { refresh: true }
      })
    },
    btnCancle() {
      this.jump2list()
    },
    getNation(value) {
      const data = getNation()
      for (const option of data) {
        if (option.value === value) {
          return option.label
        }
      }
    },
    getAccountType(value) {
      const data = getAccountType()
      for (const option of data) {
        if (option.value === value) {
          return option.label
        }
      }
    },
    findById(id) {
      findById({ id: id }).then(res => {
        if (res.data.flag) {
          this.formData = res.data.result
          // this.imageUrl = res.data.result.face
        } else {
          this.$notify.error({ title: '查询失败!', message: res.data.message })
        }
      })
      findAccountByUserId({ userId: id }).then(res => {
        if (res.data.flag) {
          this.accountDatas = res.data.result
        } else {
          this.$notify.error({ title: '查询失败!', message: res.data.message })
        }
      })
    },
    initData() { // 初始化数据
      const id = this.id
      if (id) {
        // 初始化修改时的数据
        this.findById(id)
      }
      this.findAppByEnableStatus()
    },
    findAppByEnableStatus() {
      findAppByEnableStatus({ enableStatus: 'NORMAL' }).then(res => {
        this.appLoad = true
        if (res.data.flag) {
          this.appOptions = res.data.result.map(item => {
            return { value: item.id, label: item.name }
          })
        }
      })
    },
    getBindApp(account) {
      return (account.bindRelApps).map(item => item.relAppName).join(',')
    },
    openBindAppDialog(account) {
      this.dialogAppVisible = true
      this.appForm.bindApps = (account.bindRelApps).map(item => item.relAppId)
      this.currentAccount = account
    },
    openBindRoleDialog(account) {
      this.currentAccount = account
      showBindRoleView({ id: account.id }).then(res => {
        this.dialogRoleVisible = true
        if (res.data.flag) {
          this.accountBindRoleVos = res.data.result
        }
      })
    },
    bindApp() {
      bindApplication({ accountId: this.currentAccount.id, appIds: this.appForm.bindApps }).then(res => {
        this.dialogAppVisible = false
        if (res.data.flag) {
          this.accountBindRoleVos = res.data.result
          this.$router.push({
            name: 'sysAccountAdd',
            query: { userId: this.id },
            params: { refresh: true }
          })
        }
      })
    },
    bindRole() {
      const params = this.accountBindRoleVos.map(item => {
        return { accountId: this.currentAccount.id, appId: item.relAppId, roles: item.bindRoleIds }
      })
      batchBindRole(params).then(res => {
        this.dialogRoleVisible = false
        if (res.data.flag) {
          this.accountBindRoleVos = res.data.result
        }
      })
    }
  }
}
</script>

<style scoped>
.el-tag {
  white-space: normal;
  height: auto;
}
</style>
